<template>
  <div class="open-invoice-dialog">
    <el-dialog
      v-loading="loading"
      :visible.sync="dialogVisible"
      :before-close="handleClose"
      :show-close="true"
      :append-to-body="true"
      class="open-invoice-common-dialog small-common-dialog-size"
      @close="closeDialog"
      @open="openDialog"
      @opened="opened"
    >
      <Title title="发票信息" font-size="16px" style="margin: 0 0 32px"/>
      <el-form ref="invoiceRuleForm" :class="{ '': formDataIsValid }" :model="invoiceInfo" :rules="rules" label-width="80px" label-position="left">
        <el-form-item label="发票编号" prop="no">
          <el-input
            v-model="invoiceInfo.no"
            placeholder=""
            name="no"
            type="text"
            maxlength="16"
          />
        </el-form-item>
        <el-form-item label="发票号码" prop="number">
          <el-input
            v-model="invoiceInfo.number"
            placeholder=""
            name="number"
            type="text"
            maxlength="16"
          />
        </el-form-item>
        <el-form-item label="附件" prop="attachment">
          <Upload
            :import-api="'/admin/invoice/file/import'"
            :hide-confirm="true"
            :init-file-name="invoiceInfo.attachment"
            btn-text="上传文件"
            @clear="clearFile"
            @upProgress="upProgress"
            @complateSetData="complateSetData"/>
        </el-form-item>
      </el-form>
      <div class="dialog-footer">
        <el-button class="ok" type="primary" @click="handelOk">确定</el-button>
        <el-button class="cancel-btn-style" type="info" @click="closeDialog">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import Title from '@/components/Title';
import Upload from '@/components/MediumPage/BorderUploadFile';
import { openInvoice } from '@/api/invoice';
export default {
  name: 'OpenInvoiceDialog',
  components: { Title, Upload },
  data() {
    return {
      loading: false,
      dialogVisible: false,
      antiShakeTime: 0, // 防抖时间
      isSubmit: false, // 是否提交中
      id: '',
      info: '',
      invoiceInfo: {
        no: '',
        number: '',
        attachment: '',
        attachmentUrl: ''
      },
      rules: {
        'no': [{ required: true, message: '请输入发票编号', trigger: 'change' }]
      }
    };
  },
  computed: {
    formDataIsValid() {
      const { invoiceInfo: { no }} = this;
      let isValid = true;
      if (this.$refs.invoiceRuleForm) {
        const { fields } = this.$refs.invoiceRuleForm;
        isValid = !fields.some(item => item.validateState === 'error');
      }
      const result = !!(no && isValid);
      return result;
    }
  },
  methods: {
    upProgress() {
      this.createLoading = true;
    },
    complateSetData({ data, fileName }) {
      if (!data) return;
      const url = typeof data === 'string' ? data : data.url;
      this.createLoading = false;
      // this.file = data;
      // this.fileName = fileName;
      this.invoiceInfo.attachment = fileName;
      this.invoiceInfo.attachmentUrl = url;
      // this.$message({ type: 'success', message: '上传成功' });
    },
    handleSuccess() {
      this.$message({ type: 'success', message: '开票成功' });
      this.dialogVisible = false;
      this.$emit('success');
    },
    handelOk() {
      var timestamp = Date.parse(new Date());
      if (timestamp - this.antiShakeTime < 600) {
        return;
      }
      this.antiShakeTime = timestamp;
      if (!this.formDataIsValid) {
        this.$refs.invoiceRuleForm.validate();
        this.$message({ type: 'warning', message: '请检查信息是否填写完整' });
        return;
      }
      if (this.isSubmit) {
        return;
      }
      this.isSubmit = true;
      openInvoice(this.id, this.invoiceInfo).then(res => {
        this.isSubmit = false;
        if (res.code === 200) {
          this.handleSuccess();
        }
      }).catch((e) => {
        this.isSubmit = false;
      });
    },
    closeDialog() {
      this.invoiceInfo.attachment = '';
      this.invoiceInfo.attachmentUrl = '';
      this.invoiceInfo.no = '';
      this.invoiceInfo.number = '';
      this.$refs.invoiceRuleForm.resetFields();
      this.dialogVisible = false;
    },
    handleClose() {
      this.dialogVisible = false;
    },
    openDialog() {
      // this.invoiceInfo.attachment = '';
      // this.invoiceInfo.attachmentUrl = '';
      // this.invoiceInfo.no = '';
      // this.invoiceInfo.number = '';
      // this.$refs.invoiceRuleForm.resetFields();
    },
    opened() {
      this.id = this.info.id;
      this.invoiceInfo.no = this.info.no;
      this.invoiceInfo.number = this.info.number;
      this.invoiceInfo.attachment = this.info.attachment;
      this.invoiceInfo.attachmentUrl = this.info.attachmentUrl;
    },
    initInvoiceInfo(info) {
      this.info = info;
    },
    clearFile() {
      this.invoiceInfo.attachment = '';
      this.invoiceInfo.attachmentUrl = '';
    }
  }
};
</script>
<style lang="scss" scoped>

</style>
<style lang="scss">
.open-invoice-common-dialog {
  .el-form-item {
    .el-form-item__label {
      &::before {
        content: ' ';
        margin-right: 11px;
      }
    }
  }
  .el-tag.el-tag--info {
    color: #333333;
    background-color: #FAFAFC;
  }
   .dialog-footer {
    display: flex;
    justify-content: center;
  }
  .el-date-editor .el-range-separator {
    width: 10%;
    font-size: 14px;
  }
  .el-input__inner {
    height: 32px;
    line-height: 32px;
    width: 245px;
    font-size: 14px;
  }
  .el-textarea__inner {
    font-size: 14px;
  }
  .el-date-editor .el-range-input {
    font-size: 14px;
  }
  .el-range-editor--small .el-range__icon {
    line-height: 24px;
  }
  .el-input__icon {
    line-height: 32px;
  }
  .el-form-item {
    margin-bottom: 24px;
  }
  .el-form--label-left .el-form-item__label {
    color: #666666;
  }
  .el-form-item__content {
    color: #333;
  }
}
</style>
